<template>
  <el-form ref="ruleFormRef" style="max-width: 100%" :model="edcationTest().ruleForm" :rules="rules" label-width="auto">
    <el-form-item label="学科" prop="name">
      <el-input v-model="edcationTest().ruleForm.name" />
    </el-form-item>
    <el-form-item label="年级" prop="grade">
      <el-select v-model="edcationTest().ruleForm.grade" id="grade" placeholder="请选择年级"
        style="width: 180px; margin-right: 10px">
        <el-option v-for="grade in gradeOptions" :key="grade.value" :label="grade.label" :value="grade.value" />
      </el-select>
    </el-form-item>
    <el-button type="primary" @click="created">提交</el-button>
    <el-button type="" @click="rest">重置</el-button>
  </el-form>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { educationCreateList, educationChangeList } from '@/api/education'
import { useRouter } from 'vue-router';
import router from '@/router';
import { edcationTest } from "@/stores/education";
console.log();


const route = useRouter()


// 年级下拉选项
const gradeOptions = ref([
  { label: '一年级', value: 1 },
  { label: '二年级', value: 2 },
  { label: '三年级', value: 3 },
  { label: '四年级', value: 4 },
  { label: '五年级', value: 5 },
  { label: '六年级', value: 6 },
  { label: '初一', value: 7 },
  { label: '初二', value: 8 },
  { label: '初三', value: 9 },
  { label: '高一', value: 10 },
  { label: '高二', value: 11 },
  { label: '高三', value: 12 },
]);

const ruleFormRef = ref<FormInstance>()

// 教育-新建-重置
function rest() {
  edcationTest().ruleForm.grade = ''
  edcationTest().ruleForm.name = ''
}

// 教育-新建-发送
function created() {
  if (!edcationTest().ruleForm.adds) {
    educationCreateList('/api/admin/education/subject/edit', {
      id: null,
      level: edcationTest().ruleForm.grade,
      levelName: (gradeOptions.value.find(item => { return (item.value == edcationTest().ruleForm.grade) }))?.label,
      name: edcationTest().ruleForm.name
    }).then(res => {
      console.log((gradeOptions.value.find(item => { return (item.value == edcationTest().ruleForm.grade) }))?.label,);
      rest()
      route.push('/subject')
    })
  } else {
    educationChangeList('/api/admin/education/subject/edit', {
      id: edcationTest().ruleForm.id,
      level: edcationTest().ruleForm.grade,
      levelName: edcationTest().ruleForm.levelName,
      name: edcationTest().ruleForm.name
    }).then(res => {
      console.log(res);
      rest()
      route.push('/subject')
    })
  }
}




const rules = reactive<FormRules<RuleForm>>({
  name: [
    { required: true, message: '请输入学科', trigger: 'blur' }
  ],
  grade: [
    { required: true, message: '请输入年级', trigger: 'blur' }
  ]

})



</script>


<style scoped lang="scss">
.el-form {
  padding: 20px 50px;
  height: 30vh;
}
</style>
